<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
   </head>

<body>

    <!-- 
        条件渲染
            1、v-if
                写法：
                    (1).v-if="表达式"
                    (1).v-else-if="表达式"
                    (1).v-else="表达式"
                适用于：切换频率较低的场景
                特点：不展示的DOM元素直接被移除
                注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不可以被 "打断"
            2、v-show
                写法：v-show="表达式"
                适用于：切换频率较高的场景
                特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
            
            3、备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到    
                          
     -->




    <!-- 
        实现条件渲染
        v-if 和 v-show的区别
        相同点：v-if 和 v-show 都能实现控制显示和隐藏  渲染条件都是布尔值
        不同点：
        v-show：严格意义上来说是“条件隐藏”，浏览器不管三七二十一，把HTML元素先渲染起来，符合条件就显示，不符合条件就style="display: none;"不显示，但是元素还在那
        v-if：真正意义上的“条件渲染”，浏览器会先判断是否符合条件，符合了在渲染，否则不渲染DOM,浏览器中找不到这个DOM
        性能区别：
        v-if：有更高的切换开销，因为v-if需要增删DOM，销毁和重构内部的事件、钩子函数等。如果条件很少改变，使用v-if比较好
        v-show：只能动态的改变样式，不需要增删DOM元素，如果需要频繁的切换，使用v-show比较好。不支持<template>语法，如果使用v-show 和 template标签一起使用 v-show后面的判断条件不会生效 数据会被直接渲染

     -->

    <!--准备好一个容器-->
    <div id="root">
        <h2>当前n的值是：{{n}}</h2>
        <button @click="n++">点我n的值+1</button>

        

        <!-- 
             使用v-show做条件渲染   条件是布尔值
             v-show="false"  底层的实现----style="display: none;"
         -->
        <h2 v-show="false">欢迎来到{{name}}</h2>
        <h2 v-show="1 === 1">欢迎来到{{name}}</h2>


        <!-- 使用v-if做条件渲染 -->
        <h2 v-if="false">欢迎来到{{name}}</h2>
        <h2 v-if="1 === 1">欢迎来到{{name}}</h2>

        <!-- v-else和v-else-if -->
        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>南风小可爱</div>


        <!-- v-if 与 template的配合使用 -->
        <template v-if="n === 1">
            <h2>Hello</h2>
            <h2>南风</h2>
            <h2>天津</h2>
        </template>
        
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。


    const vm = new Vue({
        el:'#root',
        data:{
            name:'兔子堡',
            n:0
        },
       
    })
</script>
</html>
